<template>
  <div>
    <a-modal
      :width="820"
      title="不用打卡日期"
      :visible="show"
      :destroy-on-close="true"
      @cancel="$emit('update:show', false)"
      @ok="handleOk"
    >
      <a-form class="lab_l form_l">
        <a-form-item label="日期" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
          <a-date-picker :default-value="moment(`${noNeedPunchDate.daily}`, 'YYYY-MM-DD')" :allow-clear="false" @change="onChange" />
        </a-form-item>
        <!-- BASSID -->
        <a-form-item label="事由" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
          <a-input v-model="noNeedPunchDate.reason" placeholder="写点什么..." />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const initNoNeed = {
  daily: moment().format("YYYY-MM-DD"),
  reason: ""
};
import moment from "moment";
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    noNeedPunchDate: {
      type: Object,
      default: initNoNeed
    },
    handleNoNeedList: {
      type: Function,
      default: () => {}
    },
    editNoUseIndex: {
      type: Number,
      default: -1
    },
    handleNoUseShow: {
      type: Function,
      default: () => {}
    }
  },

  methods: {
    onChange(date, dateString) {
      this.noNeedPunchDate.daily = dateString;
    },
    /* okHander */
    handleOk() {
      this.$emit("handleNoNeedList", this.noNeedPunchDate, this.editNoUseIndex);
      this.$emit("handleNoUseShow", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.form_l {
  margin-left: 50px;
}
</style>
